<template>
    <div class="head d-flex justify-space-between align-center" :class="moveStyle ? 'move' : ''">
        <div class="d-flex align-center hd-re">
            <slot v-if="$slots.icon" name="icon"></slot>
            <span v-else class="iconfont icon-naozhong ani-font"></span>
            <p class="ml-2">{{ text }}</p>
        </div>
        <div class="close" @click="() => emit('onClose')">
            <slot v-if="$slots.closeIcon" name="closeIcon"></slot>
            <VIcon size="18" class="clo">mdi mdi-close</VIcon>
        </div>
    </div>
</template>
<script setup lang="ts">
const emit = defineEmits(["onClose"]);
defineProps({
    /**标题文字 */
    text: {
        type: String,
        default: "标题"
    },
    moveStyle: {
        type: Boolean,
        default: false
    }
});
</script>

<style lang="less">
.close {
    cursor: default;
}

.move {
    cursor: move;
}
.clo{
    color: #5E626A;
    &:hover{
        color: #fff;
    }
}
.hd-re{
    height: 24px;
}
</style>
